<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>bookStore注册页面</title>
<%--导入css --%>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.0.js"></script>
<script type="text/javascript">
	function changeImage() {

		document.getElementById("img").src = "${pageContext.request.contextPath}/imageCode?time="
				+ new Date().getTime();
	};
	
</script>
</head>


<body class="main">
	<%@include file="head.jsp"%>
	<%--导入头 --%>
	<%@include file="menu_search.jsp"%><%--导入导航条与搜索 --%>

	<div id="divcontent">
		<form action="${pageContext.request.contextPath}/userServlet"
			method="post">
			<input type="hidden" name="action" value="register" />
			<table width="850px" border="0" cellspacing="0">
				<tr>
					<td style="padding:30px">
						<h1>新会员注册</h1>
						
						<table width="70%" border="0" cellspacing="2" class="upline">
							<tr>
								<td style="text-align:right; width:20%">会员邮箱：</td>
								<td style="width:40%">
								<input type="text" class="textinput"
									name="uemail" id="uemail"/></td>
								<td><font color="#999999">请输入有效的邮箱地址</font></td>
							</tr>
							<tr>
								<td style="text-align:right">会员名：</td>
								<td>
									<input type="text" class="textinput" name="uname" id="uname" />
								</td>
								<td><span id="sp1" ></span><font color="#999999">用户名设置至少6位</font></td>
							</tr>
							<tr>
								<td style="text-align:right">密码：</td>
								<td><input type="password" class="textinput"
									name="upwd" id="upwd" /></td>
								<td><font color="#999999">密码设置至少6位</font></td>
							</tr>
							<tr>
								<td style="text-align:right">重复密码：</td>
								<td><input type="password" class="textinput"
									name="reupwd" id="reupwd" /></td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td style="text-align:right">性别：</td>
								<td colspan="2">&nbsp;&nbsp;<input type="radio"
									name="ugender" value="1" checked="checked" /> 男
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio"
									name="ugender" value="0" /> 女</td>
							</tr>
							<tr>
								<td style="text-align:right">联系电话：</td>
								<td colspan="2"><input type="text" class="textinput"
									style="width:350px" name="utel" id="utel" /></td>
							</tr>
							<tr>
								<td style="text-align:right">个人介绍：</td>
								<td colspan="2"><textarea class="textarea" name="uintroduce" id="uintroduce"></textarea>
								</td>
							</tr>

						</table>



						<h1>注册校验</h1>
						<table width="80%" border="0" cellspacing="2" class="upline">
							<tr>
								<td style="text-align:right; width:20%">输入校验码：</td>
								<td style="width:50%"><input type="text" class="textinput" id="code" name="code"/>
								<span id="codeError"></span>
								</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td style="text-align:right;width:20%;">&nbsp;</td>
								<td colspan="2" style="width:50%"><img
									src="${pageContext.request.contextPath}/imageCode" width="180"
									height="30" class="textinput" style="height:30px;" id="img" />&nbsp;&nbsp;
									<a href="javascript:void(0);" onclick="changeImage()">看不清换一张</a>
								</td>
							</tr>
						</table>



						<table width="70%" border="0" cellspacing="0">
							<tr>
								<td style="padding-top:20px; text-align:center"><input
									type="image" src="images/signup.gif" name="submit" border="0" id="sub">
									<span style="color:red;">${registererror}</span>
								</td>
							</tr>
						</table></td>
				</tr>
			</table>
		</form>
	</div>



	<div id="divfoot">
		<table width="100%" border="0" cellspacing="0">
			<tr>
				<td rowspan="2" style="width:10%"><img
					src="images/bottomlogo.gif" width="195" height="50"
					style="margin-left:175px" /></td>
				<td style="padding-top:5px; padding-left:50px"><a href="#"><font
						color="#747556"><b>CONTACT US</b> </font> </a></td>
			</tr>
			<tr>
				<td style="padding-left:50px"><font color="#CCCCCC"><b>COPYRIGHT
							2012 &copy; eShop All Rights RESERVED.</b> </font></td>
			</tr>
		</table>
	</div>


</body>
<script type="text/javascript">

var unameflag=false;
var codeflag=false;


$(function(){
	//验证码ajax校验
	$("#code").blur(function(){
		var code=$("#code").val();
		$.ajax({
			url:"${pageContext.request.contextPath}/userServlet",
			data:{"code":code,"action":"codeImageCheck"},
			dataType:"json",
			cache:"false",
			async:"true",
			type:"post",
			success:function(data){
				if(data.flag=="0"){
					$("#codeError").html("验证码错误").css("color","red");
				}else {
					$("#codeError").html("");
					codeflag=true;
				}
			}
		
		});
		
	});
	
	
	//用户名ajax校验
	$("#uname").blur(function(){
		var uname=$(this).val();
		if(uname!=""){
			$.ajax({
				url:"${pageContext.request.contextPath}/userServlet",
				data:{"uname":uname,"action":"ajaxFindByName"},
				dataType:"json",
				cache:"false",
				async:"true",
				success:function(data){
					if(data.flag=="1"){ // 用户名已经存在
						$("#sp1").html("用户名已经存在").css("color","red");
						
					}else{
						$("#sp1").html("");
						unameflag=true;
					}
				}
			});
		}
	});
	
	//提交前格式校验
	$("form").submit(function(){
		var uemail=$("#uemail").val();
		var uname=$("#uname").val();
		var upwd=$("#upwd").val();
		var reupwd=$("#reupwd").val();
		var utel=$("#utel").val();
		var code=$("#code").val();
		
		var unameRegex=/^\w{6,20}$/;
		var uemailRegex=/^\w+@\w+\.\w+$/;
		var utelRegex=/^[1][34578]\d{9}$/;
		var upwdRegex=/^\w{6,30}$/;
		
		if(code==""){
			alert("验证码不能为空");
			$("#code").focus();
			return false;
		}else if(!codeflag){
			//刷新验证码
			document.getElementById("img").src = "${pageContext.request.contextPath}/imageCode?time="
					+ new Date().getTime();
			$("#code").focus();
			return false;
		}
		else if(!uemailRegex.test(uemail)){
			alert("请输入正确的邮箱格式");
			$("#uemail").focus();//获取焦点
			return false;
		}else if(!unameRegex.test(uname)){
			alert("请输入正确的用户名");
			$("#uname").focus();//获取焦点
			return false;
		}else if(!unameflag){
			//alert("用户名已经存在");
			$("#uname").focus();//获取焦点
			return false;
		}
		else if(!upwdRegex.test(upwd)){
			alert("密码格式不正确");
			$("#upwd").focus();//获取焦点
			return false;
		}
		else if(upwd!=reupwd){
			alert("两次输入的密码不一样");
			$("#reupwd").focus();//获取焦点
			return false;
		}
		else if(!utelRegex.test(utel)){
			alert("请输入正确的手机号");
			$("#utel").focus();//获取焦点
			return false;
		}
		
		return true;
		
		
	});

	
})
</script>
</html>
